<template>
	<view class="box">
		<u-popup :show="show" mode="bottom" @close="close" @open="open">
			<view class="box1">
				<view class="box2">
					<view class="img">
						<!-- 这里面放的是选择好的商品的图片 -->
					</view>
					<view class="p">
						<p class='p1'>￥239</p>
						<p class='p2'>库存49件</p>
						<p class='p3'>已选择 红色 XL</p>
					</view>
				</view>

				<view class="box3">
					<p>*使用10公里徒步里程可减100元，到手价为139</p>
				</view>

				<view class="box4">
					<view class="p1">
						<p>颜色</p>
					</view>
					<view class="botton">
						<p v-for="item in color" :key="item.id">{{item.color}}</p>
						<!-- <p>蓝色</p>
						<p>白色</p> -->
					</view>
					<view class="p1">
						<p>尺码</p>
					</view>
					<view class="botton">
						<p v-for="item in size" :key="item.id">{{item.size}}</p>
						<!-- <p>L</p>
						<p>XL</p>
						<p>XXL</p> -->
					</view>
				</view>
				<view class="box5">
					<view class="num">
						<p>购买数量</p>
					</view>
					<view class="pagenum">
						<view class="subtraction" @click="subtract">
							<u-icon name="minus"></u-icon>
						</view>
						<p>{{num}}</p>
						<view class="addition" @click="add">
							<u-icon name="plus"></u-icon>
						</view>
					</view>
				</view>
				<view class="determine">
					<button>确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		name: 'Shoppingcart',
		props: ['show'],
		data() {
			return {
				// show: false
				num: 1,
				color:[{
					id:1,
					color:'红色',
				},
				{
					id:2,
					color:'蓝色',
				},
				{
					id:3,
					color:'白色',
				},],
				size:[
					{
						id:1,
						size:'M'
					},{
						id:2,
						size:'L'
					},{
						id:3,
						size:'XL'
					}
				]
			}
		},

		methods: {
			open() {},
			// 向父组件传递参数取消弹框
			close() {
				this.$emit('b', false)
			},
			subtract() {
				this.num = this.num - 1
				if (this.num < 1) {
					this.num = 1
					console.log('no');
					uni.showToast({
						title: '低于最少购买数',
						duration: 2000,
						icon:'error'
					});
				}

			},
			add() {
				this.num++
				console.log("num", this.num);
				
			}
		}
	}
</script>



<style lang="less">
	.box {
		width: 750rpx;
		height: 300rpx;
		background-color: aqua;
		.box1 {
			height: 700rpx;

		padding-top: 20rpx;
			.box2 {
				height: 150rpx;
				display: flex;

				.img {
					width: 150rpx;
					height: 150rpx;
					background-color: aqua;
					margin-left: 20rpx;
				}

				.p {
					width: 580rpx;
					height: 110rpx;
					padding-top: 40rpx;

					p {
						margin-left: 20rpx;
					}

					.p1 {
						color: red;
					}

					.p2 {
						font-size: 25rpx;
					}

					.p3 {
						font-size: 25rpx;
					}
				}
			}

			.box3 {
				height: 30rpx;

				p {
					color: red;
					font-size: 20rpx;
					margin-left: 20rpx;
					line-height: 30rpx;
				}
			}

			.box4 {
				height: 240rpx;

				p {
					margin-left: 20rpx;
				}

				.botton {
					height: 60rpx;
					display: flex;
					align-items: center;

					p {
						width: 100rpx;
						height: 30rpx;
						font-size: 25rpx;
						border: 1rpx solid #f2f2f2;
						text-align: center;
						border-radius: 10rpx;
						background-color: #f2f2f2;
					}
				}
			}

			.box5 {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.num {
					margin-left: 20rpx;
				}

				.pagenum {
					width: 200rpx;
					display: flex;
					align-items: center;
					height: 100rpx;
					margin-right: 50rpx;
					display: flex;
					align-items: center;

					.subtraction {
						width: 50rpx;
						border: 1rpx solid #e4e4e4;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					p {
						height: 33rpx;
						width: 70rpx;
						border: 1rpx solid #e4e4e4;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.addition {
						width: 50rpx;
						border: 1rpx solid #e4e4e4;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
			.determine{
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: #fefefe;
				height: 110rpx;
				display: flex;
				button{
					width: 750rpx;
				}
			}
		}
	}
</style>
